<template>
  <div class="content_box">
    <div class="msg_box">
   
      <div class="box">
        <p class="title">发放优惠券</p>
        <div class="picker">
          {{couponMsg.content}}
        </div>
      </div>
      <div class="box">
        <div>
          <p class="title">发放方式</p>
        </div>
        <div class="yj">
          <p 
          @click="clickStatus(index)" 
          :class="statusIndex == index?'on':''" 
          v-for="(item,index) in status_list" :key="index">{{item.label}}</p>
        </div>
      </div>
      <div class="box" style="height:280rpx" v-if="statusIndex == 1">
        <div>
          <p class="title">输入用户</p>
          <p class="tips">*手机号请用英文逗号隔开</p>
        </div>
        <div class="textarea">
          <textarea v-model="phoneStr" placeholder="请输入用户手机号，逗号隔开"></textarea>
        </div>
      </div>

      <div class="box1" v-if="statusIndex == 2" style="padding:20rpx 0">
        <!-- <picker class="picker1" @change="PickerChange" :range="array" range-key="groupName">
          <div class="box_user">
            <p class="title" style="margin-bottom:0">选择用户分组</p>
            <p class="changeOrder">{{userGroupName}} <van-icon name="arrow" /></p>
          </div>
        </picker> -->
        <van-checkbox-group @change="onChange" :value="userGroup">
          <van-checkbox :name="item.groupType" v-for="(item,index) in array" :key="index">{{item.groupName}}</van-checkbox>
        </van-checkbox-group>
        <!-- <van-checkbox-group :value="result" @change="onChange">
        <van-checkbox name="a">复选框 a</van-checkbox>
        <van-checkbox name="b">复选框 b</van-checkbox>
        <van-checkbox name="c">复选框 c</van-checkbox>
      </van-checkbox-group> -->
      </div>
    </div>
    <div class="anniu_box">
      <van-button 
        @click="submit"
        :disabled="loading"
        :loading="loading" 
        loading-text="发放中..."
        type="primary"
        color="#3d98f7"
        custom-style="box-shadow: 0rpx 10rpx 20rpx #CEDBFA;border:none;width: 100%;height: 88rpx;line-height: 88rpx;background: #1E68FF;border-radius: 100rpx;text-align: center;color: #fff;font-size: 30rpx;"
      >立即发放</van-button>
    </div>

    <div class="ff_box">
      <div class="title_box">
        <p class="line"></p>
        <p class="text">发放记录</p>
      </div>
      <div class="list_box" v-if="list.length">
        <div class="list" v-for="(item,index) in list" :key="index">
          <div class="box name">
            <p>{{item.content}}</p>
            <van-tag v-if="item.status == 1" type="success" size="medium">进行中</van-tag>
            <van-tag v-if="item.status == 2" type="primary" size="medium">已完成</van-tag>
            <van-tag v-if="item.status == 3" type="success" size="warning">撤回中</van-tag>
            <van-tag v-if="item.status == 4" type="success" size="warning">已撤回</van-tag>
            <van-tag v-if="item.status == 5" type="success" size="danger">已失效</van-tag>
          </div>
          <div class="box">
            <p>发放时间：</p>
            <p>{{item.createTime}}</p>
          </div>
          <div class="box">
            <p>开始时间：</p>
            <p>{{item.startTime}}</p>
          </div>
          <div class="box">
            <p>结束时间：</p>
            <p>{{item.endTime}}</p>
          </div>
          <div class="anniu" v-if="item.status == 2">
            <p @click="cancelFf(item)">取消发放</p>
          </div>
        </div>
        
      </div>
      <div class="no_data" v-else>
        <img src="/static/images/no_sp.png" alt="">
        <p class="text">暂无发放记录</p>
      </div>
    </div>
  </div>
</template>
 
<script>
import {
  getCouponPage,
  giveOutCoupon,
  getGiveOutCouponList,
  recallGetGiveOut,
  getUserGroup
} from "@/api/index";
export default {
  components: {},
  data() {
    return {
      loading:false,
      query:{
        size:50,
        current:1,
        storeId:''
      },
      couponMsg:{},
      couponId:'',
      list:[],
      status_list:[
        {
          value:'0',
          label:'全部用户',
        },
        {
          value:'1',
          label:'指定用户',
        },
        {
          value:'2',
          label:'用户分组',
        },
      ],
      statusIndex:0,
      phoneStr:'',
      giveOutCrowd:0,
      array:[],
      userGroupName:'',
      userGroup:[],
    };
  },
  onShow() {
  },

  methods: {

    onChange(event) {
      console.log(event)
      this.userGroup = event.mp.detail
    },

    // PickerChange(e){
    //   let index = +e.mp.detail.value
    //   this.userGroupName = this.array[index].groupName
    //   this.userGroup = this.array[index].groupType
    // },

    // 用户分组
    getUserList(){
      getUserGroup({userTel:''}).then(res=>{
        console.log(res)
        if(res.statusCode == '00000'){
          this.array = res.data
          console.log(this.array)
        }
      })
    },

    // 发放方式
    clickStatus(index){
      this.statusIndex = index
      this.giveOutCrowd = index
      // this.formData.suggest = this.status_list[index].value
    },

    // 取消发放
    cancelFf(item){
      console.log(item)
      wx.showModal({
        title: '温馨提示',
        content: '确定撤回发放',
        success: (result) => {
          const { confirm } = result
          if (confirm) {
            this.$showLoading('撤回中...')
            recallGetGiveOut({id:item.id}).then(res=>{
              if(res.statusCode == '00000'){
                wx.hideLoading()
                this.$toast('撤回成功')
                this.getFfList()
              }else{
                wx.hideLoading()
                this.$toast(res.message)
              }
            })
          }
        }
      })
    },
    
    // 获取优惠券列表
    getList(){
      this.$showLoading('加载中...')
      getCouponPage(this.query).then(res=>{
        if(res.statusCode == '00000'){
          let list = res.data.records
          this.couponMsg = list.find(item=>item.id == this.couponId)
          console.log(this.couponMsg)
          wx.hideLoading()
        }else{
          wx.hideLoading()
          this.$toast(res.message)
        }
      })
    },

    // 获取发放记录列表
    getFfList(){
      getGiveOutCouponList({couponId:this.couponId}).then(res=>{
        if(res.statusCode == '00000'){
          this.list = res.data
        }else{
          this.$toast(res.message)
        }
      })
    },  

    // 提交
    submit(){
      if(this.giveOutCrowd == 1){
        if(!this.phoneStr){
          this.$toast('请输入手机号！')
          return
        }
      }
      if(this.giveOutCrowd == 2){
        if(!this.userGroup.length){
          this.$toast('请选择用户分组！')
          return
        }
      }
      wx.showModal({
        title: '温馨提示',
        content: '确定发放该优惠券到用户',
        success: (result) => {
          const { confirm } = result
          if (confirm) {
            this.$showLoading('发放中...')
            this.loading = true
            let data = {
              couponId:this.couponId,
              storeId:this.query.storeId,
              phoneStr:this.phoneStr,
              giveOutCrowd:this.giveOutCrowd,
              userGroup:this.userGroup
            }
            console.log(data)
            giveOutCoupon(data).then(res=>{
              if(res.statusCode == '00000'){
                this.loading = false
                wx.hideLoading()
                this.$toast('发放成功')
                this.getFfList()
              }else{
                this.loading = false
                wx.hideLoading()
                this.$toast(res.message)
              }
            })
          }
        }
      })
    }
  },
  onLoad(options) {
    this.query.storeId = options.storeId
    this.couponId = options.couponId
    this.getList()
    this.getFfList()
    this.getUserList()
    console.log(options)
  },
  onHide() {},

  onUnload() {
    this.phoneStr = ''
    this.statusIndex = 0
    this.userGroup = []
    this.userGroupName = ''
  },
};
</script>

<style lang="scss" scoped>
.content_box{
  padding-bottom:80rpx;
}
.msg_box{
  margin:0 30rpx;
  .box1{
    /deep/ .van-checkbox{
      margin-top:20rpx;
    }
  }
  .box{
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:28rpx;
    color:#222;
    border-bottom:1px solid #f5f5f5;
    
    .title{
      font-weight: 500;
      display: flex;
      align-items: center;
      span{
        display: inline-block;
        width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        background: #1E68FF;
        border-radius: 50%;
        color:#fff;
        text-align: center;
        font-size:24rpx;
        margin-left:20rpx;
      }
    }
    .tips{
      font-size:22rpx;
      color:red;
      margin-top:4rpx;
    }
    .price{
      display: flex;
      align-items: center;
      input{
        text-align: right;
        margin-right:20rpx;
      }
    }
    .yj{
      display: flex;
      align-items: center;
      p{
        width: 140rpx;
        padding:8rpx 0;
        background: #F1F3F4;
        border-radius: 10rpx;
        font-size:28rpx;
        margin-right:30rpx;
        text-align: center;
      }
      .on{
        background: #1E68FF;
        color:#fff;
      }
      input{
        text-align: right;
        margin-right:20rpx;
        font-size:28rpx;
      }
      span{
        font-size:28rpx;
      }
    }
    .yy{
      display: flex;
      input{
        width: 140rpx;
        border:1px solid #dcdfe6;
        text-align: center;
        height: 60rpx;
        border-radius: 10rpx;;
        margin:0;
      }
      span{
        margin:0 20rpx;
      }
  
    }
  }
}
.anniu_box{
  margin:50rpx 30rpx;
}
.ff_box{
  margin:100rpx 30rpx 0 30rpx;
  .title_box{
    display: flex;
    align-items: center;
    margin:0rpx 0 30rpx 0;
    .line{
      width: 6rpx;
      height: 30rpx;
      background: #1E6AFF;
    }
    .text{
      font-size:30rpx;
      font-weight: 500;
      margin-left:10rpx;
    }
  }
  .list_box{
    .list{
      border-radius: 20rpx;
      padding:24rpx;
      box-shadow: 0rpx 10rpx 20rpx 4rpx rgba(139, 129, 114, 0.1);
      .box{
        display: flex;
        font-size:28rpx;
        margin-bottom:16rpx;
        &:last-child{
          margin-bottom:0;
        }
        &.name{
          justify-content: space-between;
          border-bottom:1px solid #f5f5f5;
          padding-bottom:16rpx;
          p{
            font-size:32rpx;
            font-weight: 500;
          }
        }
      }
      .anniu{
        margin-top:40rpx;
        p{
          border:1px solid #1E68FF;
          color:#1E68FF;
          width: 160rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          font-size:28rpx;
          border-radius: 8rpx;
        }
      }
    }
  }
  .no_data{
    text-align: center;
    font-size:28rpx;
    color:#333;
    padding-top:150rpx;
    .text{
      font-weight: 500;
      color:#999;
    }
    img{
      width: 248rpx;
      height: 248rpx;
    }
  }
}
.textarea{
  width: 300rpx;
  border:1px solid #f5f5f5;
  height: 160rpx;
  border-radius: 10rpx;
  padding:30rpx;
  textarea{
    width: 100%;
    height: 100%;
    font-size:30rpx;
  }
}
.picker1{
  width: 100%;
}
.box_user{
  display: flex;
  justify-content: space-between;
}
</style>
